<template>
  <div id="vanCard" v-if="teamInfo != null">
    <van-card :desc="teamInfo.description"
              :title="teamInfo.name"
              :thumb="teamInfo.imageUrl"
    >
      <template #tags style="margin-bottom: 3px;margin-top: 10px">
        <van-image v-for="user in teamInfo.userList" style="margin-right: 4px;margin-top: 3px"
                   round
                   width="25px"
                   height="25px"
                   :src="user.avatarUrl"
                   fit="cover"
        />
      </template>
      <template #bottom style="margin-bottom: 3px">
        <div>
          队伍需{{teamInfo.maxNum}} | 现人数{{teamInfo.currentTeamNum}} {{teamInfo.maxNum == teamInfo.currentTeamNum ? '已满' : ''}}
          <van-tag style="margin-left: 3px" plain type="primary">{{teamStatus[teamInfo.status]}}</van-tag>
        </div>
        <div>
          过期时间：{{teamInfo.expireTime}}
        </div>
      </template>

      <template #footer>
        <van-button size="mini" plain type="danger" @click="quit" v-if="currentUserId != teamUser.id">退出队伍</van-button>
        <van-button size="mini" plain type="danger" @click="dissolution" v-else>解散队伍</van-button>
        <van-button size="mini" plain type="primary" @click="toInviteFriend">邀请好友</van-button>
      </template>
    </van-card>
  </div>

  <van-empty image="search" description="队伍暂无" v-if="!teamInfo" />
  <van-loading  vertical v-if="!teamInfo">
    <template #icon>
      <van-icon name="star-o" size="30" />
    </template>
    加载中...
  </van-loading>

  <div>
    <van-cell-group inset>
      <van-cell title="队长">队长信息</van-cell>
    </van-cell-group>
    <van-cell-group inset style="background-color: #fffbe8;">
      <div style="display: flex;flex-direction: row">

        <div style="display:flex;flex-direction: column;margin-left: 4px;margin-top: 5px" @click="toMemberCenter">
          <van-image fit="cover" round :src="teamUser.avatarUrl" style="width: 60px;height: 60px;margin-bottom: 3px"/>
          <div style="font-size: 12px">{{teamUser.username}}</div>
        </div>

        <div style="display:flex;flex-direction: column;margin-left: 10px;margin-top: 5px" @click="toMemberCenter">
          <div style="font-size: 12px">个人简介：{{teamUser.personalProfile}}</div>
          <div style="font-size: 12px;margin-top: 2px" v-if="teamUser.phone != null">
            <span>手机号码：</span>
            <span>{{teamUser.phone}}</span>
          </div>
          <div style="font-size: 12px;margin-top: 2px" v-if="teamUser.email != null">
            <span>邮箱：</span>
            <span>{{teamUser.email}}</span>
          </div>
        </div>
      </div>
    </van-cell-group>
  </div>


  <div>
    <van-cell-group inset>
      <van-cell title="其他成员">成员信息</van-cell>
    </van-cell-group>
    <van-cell-group  v-for="teamU in teamUserList" inset style="background-color: #fffbe8;margin-top: 6px">
      <div style="display: flex;flex-direction: row">

        <div style="display:flex;flex-direction: column;margin-left: 4px;margin-top: 5px" @click="toMemberCenter">
          <van-image fit="cover" round :src="teamU.avatarUrl" style="width: 60px;height: 60px;margin-bottom: 3px"/>
          <div style="font-size: 12px">{{teamU.username}}</div>
        </div>

        <div style="display:flex;flex-direction: column;margin-left: 10px;margin-top: 5px" @click="toMemberCenter">
          <div style="font-size: 12px">个人简介：{{teamU.personalProfile}}</div>
          <div style="font-size: 12px;margin-top: 2px" v-if="teamU.phone != null">
            <span>手机号码：</span>
            <span>{{teamU.phone}}</span>
          </div>
          <div style="font-size: 12px;margin-top: 2px" v-if="teamU.email != null">
            <span>邮箱：</span>
            <span>{{teamU.email}}</span>
          </div>
        </div>
      </div>
    </van-cell-group>


  </div>

</template>

<script setup lang="ts">
import {useRoute, useRouter} from "vue-router";
import {teamStatus} from "../constant/TeamStatus.ts";
import {onMounted, ref} from "vue";
import {dissolutionTeam, quitTeam, selectOneTeam} from "../api/teamApi.ts";
import {showToast} from "vant";
import {getCurrentUserAPI} from "../api/userApi.ts";
import {userStore} from "../stores/user/user.ts";

const route = useRoute();
const router = useRouter();
const teamInfo = ref();
const teamId = ref();
const userIdList = ref();

//排除队长意外的成员信息
const teamUserList = ref();
//队长信息
const teamUser = ref({});
const userStoreAPI = userStore();
const currentUserId = ref();



// 加载队伍信息
onMounted(async ()=>{
  //拿到当前用户的id
  currentUserId.value = userStoreAPI.getCurrentUser()?.id;

  teamId.value = route.query.teamId;
  userIdList.value = route.query.userIdList;
  const teamSelectOneRequest = {
    teamId: teamId.value,
    userIdList: userIdList.value
  };
  console.log("teamSelectOneRequest",teamSelectOneRequest)

  const res = await selectOneTeam(teamSelectOneRequest);
  if (200 === res.code){
    teamInfo.value = res.data;
    console.log("teamInfo",JSON.stringify(teamInfo.value));

    //获取队长信息 + 其他成员的信息
    const userId = teamInfo.value.userId;
    teamUserList.value = teamInfo.value.userList.filter(user => user.id!== userId);
    teamInfo.value.userList.forEach(user => {
      if (user.id == userId){
        teamUser.value = user;
        return;
      }
    });
    console.log('成员信息',teamUserList.value);
    console.log('队长信息',teamUser.value);

  }
});

// 退出队伍
const quit = async () => {
  const res = await quitTeam({teamId: teamId.value});
  if (200 === res.code) {
    showToast("退出成功")
    router.back();// 退出后返回上一页
  }
}

// 解散队伍
const dissolution = async () => {
  const res = await dissolutionTeam({teamId: teamId.value});
  if (200 === res.code) {
    showToast("解散成功")
    router.back();// 解散后返回上一页
  }
}

// 邀请好友
const toInviteFriend = () => {
  console.log("邀请好友")
  //传入队伍的id + maxNum + currentTeamNum => 前端校验 (好友邀请的人数不能超过maxNum)
  console.log("teamId",teamId.value)
  router.push({
    path: '/myFriends',
    query: {
      teamId: teamId.value,
      maxNum: teamInfo.value.maxNum,
      currentTeamNum: teamInfo.value.currentTeamNum
    }
  })

}




</script>

<style scoped>
#vanCard :deep(.van-card__thumb){
    height: 75px;
    width: 75px;
}

</style>